<template>
  <div class="box-main">
    <div class="topHeaderCard">
      <a-button type="primary" @click="resetBack" :icon="h(ArrowLeftOutlined)" ghost>
        返回
      </a-button>
    </div>
    <div class="bax-main-content">
      <div class="serviceWrap">
        <p class="name">服务组名称：{{ groupObj.groupName }}</p>
        <p class="time">创建时间：{{ groupObj.createTime }}</p>
      </div>
      <div class="wrap-content">
        <a-table
          class="table"
          size="small"
          :loading="loading"
          :dataSource="List"
          :columns="columns"
          :pagination="pagination"
          @change="paginationChange"
          :sticky="{ offsetHeader: 0 }"
        >
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex == 'no'">
              <p class="num">{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</p>
            </template>
            <template v-if="column.dataIndex == 'memberRoleType'">
              {{ record.memberRoleType == 'leader' ? '组长' : '普通成员' }}
            </template>

            <!-- <template v-else-if="column.dataIndex === 'action'">
              <a-button type="link">查看</a-button>
            </template> -->
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, h } from 'vue'
import { imgroupPageMember } from '@/api/memberOrder/index'
import { Empty, Modal, message } from 'ant-design-vue'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
const loading = ref<boolean>(false)
const List = ref<any[]>([])
const emit = defineEmits(['close'])
const groupObj = ref({})
const columns = ref<any[]>([
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'left',
    width: 150
  },
  {
    title: '姓名',
    dataIndex: 'memberName',
    key: 'memberName',
    align: 'left'
  },
  {
    title: '角色',
    dataIndex: 'memberRoleType',
    key: 'memberRoleType',
    align: 'left'
  }
  //   {
  //     title: '操作',
  //     dataIndex: 'action',
  //     key: 'action',
  //     align: 'left',
  //     width: 100
  //   }
])
const pagination = ref<any>({
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100'],
  showQuickJumper: true
})
const init = (data) => {
  console.log(888999)
  console.log(data)
  groupObj.value = data
  imgroupPageMember({
    groupId: groupObj.value.groupId,
    page: pagination.value.current,
    limit: pagination.value.pageSize
  })
    .then((res) => {
      List.value = res.data.list
      pagination.value.total = res.data.total
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}
const paginationChange = (page: any) => {
  pagination.value = { ...page }
  loading.value = true
  getDataList()
}
const getDataList = () => {
  imgroupPageMember({
    groupId: groupObj.value.groupId,
    page: pagination.value.current,
    limit: pagination.value.pageSize
  })
    .then((res) => {
      List.value = res.data.list
      pagination.value.total = res.data.total
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

const resetBack = () => {
  router.replace({ query: {} })
  emit('close')
}
defineExpose({
  init
})
</script>
<style lang="less" scoped>
.layout-content {
  padding: 0 !important;
}

.box-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden !important;

  .topHeaderCard {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding-left: 24px;
    background-color: #fff;

    ::v-deep(.ant-tabs-nav) {
      margin: 0;
    }

    ::v-deep(.ant-tabs-nav-wrap) {
      height: 48px;
      padding: 0 20px;
      padding-top: 2px;
    }
  }

  .bax-main-content {
    height: calc(100% - 80px);
    margin: 16px;
    background: #fff;

    .serviceWrap {
      padding: 16px 24px 0;
      margin-bottom: 16px;

      .name {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
      }

      .time {
        display: inline-block;
        margin: 0 0 0 30px;
        vertical-align: middle;
      }
    }

    .wrap-content {
      width: 100%;
      height: calc(100% - 56px);
      padding: 0 24px;
      overflow: hidden auto;
      background: #fff;

      ::v-deep(.table) {
        .num {
          height: 32px;
          margin-bottom: 0;
          line-height: 32px;
        }
      }
    }
  }
}
</style>
<style></style>
